@mixin identity-provider-theme($theme) {
  $is-dark-theme: map-get($theme, is-dark);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $button-text-color: map-get($foreground, text);
  $button-disabled-text-color: map-get($foreground, disabled-button);

  .identity-provider-desc {
    font-size: 14px;
  }

  .identity-provider-create-content {
    .identity-provider-title-row {
      display: flex;
      align-items: center;

      .idp-logo {
        height: 36px;
        width: 36px;
        margin-right: 1rem;
        flex-shrink: 0;

        &.apple {
          margin-bottom: 4px;
        }

        &.dark {
          display: if($is-dark-theme, block, none);
        }

        &.light {
          display: if($is-dark-theme, none, block);
        }
      }

      .idp-icon {
        font-size: 36px;
        margin-right: 1rem;
        flex-shrink: 0;
      }

      h1 {
        margin: 0 1rem 0 0;
      }
    }

    .update-secret-checkbox {
      margin: 0.5rem 0 0 0;
    }

    .formfield {
      display: block;
      max-width: 500px;

      &.pwd {
        display: none;
      }

      &.pwd.show {
        display: block;
      }

      .name-hint {
        font-size: 12px;
      }

      .mat-mdc-chip-input {
        width: 100%;
        margin: 0;
      }

      .chip {
        border-radius: 0.5rem;
        height: 40px;
      }

      @media only screen and (max-width: 450px) {
        max-width: none;
      }
    }

    .pk-label {
      font-size: 12px;
      margin-top: 0.5rem;
    }

    .private-key-wrapper {
      position: relative;
      height: 70px;
      width: 70px;
      box-sizing: border-box;
      border-radius: 0.5rem;
      margin-top: 0.5rem;
      border: 1px solid map-get($foreground, divider);
      display: flex;
      justify-content: center;
      align-items: center;

      .dl-btn {
        z-index: 2;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        visibility: hidden;
        transform: translateX(50%) translateY(-50%);
      }

      img {
        top: 0;
        left: 0;
        width: 70px;
        height: 70px;
        object-fit: contain;
        object-position: center;
        border-radius: 0.5rem;
      }

      &.icon {
        border-radius: 50%;

        img {
          border-radius: 50%;
        }
      }

      &:hover {
        .dl-btn {
          visibility: visible;
        }
      }
    }

    .string-list-component-wrapper {
      max-width: 500px;
    }

    .identity-provider-content {
      display: flex;
      flex-direction: column;

      .subheader {
        margin: 2rem 0 0.5rem 0;
      }

      .identity-provider-2-col {
        max-width: 500px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
      }

      .desc {
        margin-bottom: 1rem;
      }

      .idp-scopes {
        padding-bottom: 0.5rem;

        .flex-line {
          display: flex;
          align-items: flex-start;
          max-width: 500px;

          .formfield {
            flex: 1;
          }

          .scope-add-button {
            margin-top: 1.75rem;
          }
        }
      }
    }
  }

  .identity-provider-create-actions {
    display: flex;
    margin-top: 1rem;

    button[mat-raised-button] {
      border-radius: 0.5rem;
      padding: 0.5rem 4rem;
      height: 3.5rem;
    }
  }

  .identity-provider-optional-h-wrapper {
    display: flex;
    align-items: center;

    h2 {
      margin: 1rem 0.25rem 1rem 0;
    }
  }
}

.cnsl-state-dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  flex-shrink: 0;

  &.active {
    background-color: var(--success);
  }

  &.inactive {
    background-color: var(--warn);
  }
}
